
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>CSS <span class="color_h1">分组</span> 和 <span class="color_h1">嵌套</span> 选择器</h1>
<hr/>
<h2>分组选择器</h2>
<p>在样式表中有很多具有相同样式的元素。</p>
<div class="example"> <div class="example_code"><div class="hl-main"><span class="hl-identifier">h1</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">color:</span><span class="hl-var">green</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">h2</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">color:</span><span class="hl-var">green</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">p</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">color:</span><span class="hl-var">green</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div></div></div>
<p>为了尽量减少代码，你可以使用分组选择器。</p>
<p>每个选择器用逗号分隔。</p>
<p>在下面的例子中，我们对以上代码使用分组选择器：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">h1</span><span class="hl-code">,</span><span class="hl-identifier">h2</span><span class="hl-code">,</span><span class="hl-identifier">p</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">color:</span><span class="hl-var">green</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div></div>
<br/><a class="tryitbtn"  rel="noopener" target="_blank">尝试一下 »</a>
</div>
<br/><hr/>
<h2>嵌套选择器</h2>
<p>它可能适用于选择器内部的选择器的样式。</p>
<p>在下面的例子设置了四个样式：</p>
<ul><li><span class="marked">p{ }</span>: 为所有 <strong>p</strong> 元素指定一个样式。</li>
<li><span class="marked">.marked{ }</span>: 为所有 <strong>class="marked"</strong> 的元素指定一个样式。</li>
<li><span class="marked">.marked p{ }</span>: 为所有 <strong>class="marked"</strong> 元素内的 <strong>p</strong> 元素指定一个样式。</li>
<li><span class="marked">p.marked{ }</span>: 为所有 <strong>class="marked"</strong> 的 <strong>p</strong> 元素指定一个样式。</li>
</ul>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">p</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">color:</span><span class="hl-var">blue</span><span class="hl-reserved"></span><span class="hl-code">;
    </span><span class="hl-reserved">text-align:</span><span class="hl-string">center</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">.marked</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">background-color:</span><span class="hl-var">red</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">.marked</span><span class="hl-code"> </span><span class="hl-identifier">p</span><span class="hl-code">
</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">color:</span><span class="hl-var">white</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span><span class="hl-code">
</span><span class="hl-identifier">p</span><span class="hl-identifier">.marked</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-reserved">text-decoration:</span><span class="hl-string">underline</span><span class="hl-reserved"></span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  rel="noopener" target="_blank">尝试一下 »</a>
</div>
<br/> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    